<script setup lang="ts">
import { BASE_WS_URL } from "@/config/env";
import * as SpiceHtml5 from '@spice-project/spice-html5/src/main';
import { onBeforeUnmount, onMounted } from 'vue';

var props = defineProps<{
    url: string, /** 地址 */
    passwd?: string, /** 密码 */
    debug?: boolean /** 是否开启调试 */
}>();

var sc: any;

const connect = () => {
    if (sc) {
        sc.stop();
    }
    let uri = BASE_WS_URL +"websockify/?token="+ props.url;
    try {
        if (props.debug == true) {
            sc = new SpiceHtml5.SpiceMainConn({
                uri: uri,
                screen_id: "spice-screen",
                dump_id: "debug-div",
                message_id: "message-div",
                password: props.passwd,
                onerror: spice_error,
                onagent: agent_connected
            });
        } else {
            sc = new SpiceHtml5.SpiceMainConn({
                uri: uri,
                screen_id: "spice-screen",
                password: props.passwd,
                onerror: spice_error,
                onagent: agent_connected
            });
        }
    } catch (e: any) {
        alert(e.toString());
        disconnect();
    }
}

const disconnect = () => {
    console.log(">> disconnect");
    if (sc) {
        sc.stop();
    }
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var spice_xfer_area = document.getElementById('spice-xfer-area');
        if (spice_xfer_area != null) {
            let area: any = document.getElementById('spice-area'); area.removeChild(spice_xfer_area);
        }
        let area: any = document.getElementById('spice-area'); area.removeEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
        area.removeEventListener('drop', SpiceHtml5.handle_file_drop, false);
    }
    (<any>window).spice_connection = null;
    console.log("<< disconnect");
}

const spice_error = (e: any) => {
    disconnect();
}

const agent_connected = (sc: any)=> {
    window.addEventListener('resize', SpiceHtml5.handle_resize);
    (<any>window).spice_connection = <any>this;
    SpiceHtml5.resize_helper(<any>this);
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var spice_xfer_area = document.createElement("div");
        spice_xfer_area.setAttribute('id', 'spice-xfer-area');
        let area: any = document.getElementById('spice-area')
        area.appendChild(spice_xfer_area);
        area.addEventListener('dragover', SpiceHtml5.handle_file_dragover, false);
        area.addEventListener('drop', SpiceHtml5.handle_file_drop, false);
    } else {
        console.log("File API is not supported");
    }
}

onMounted(() => {
    connect();
})

onBeforeUnmount(() => {
    disconnect();
})
</script>

<template>
    <v-if test="debug">
        <div id="message-div" class="spice-message"></div>
        <div id="debug-div"></div>
    </v-if>
    <div id="spice-area">
        <div id="spice-screen" class="spice-screen"></div>
    </div>
</template>